<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<!-- meta使用viewport以确保页面可自由缩放 -->
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<title>主页</title>
		<link rel="stylesheet" href="css/weui.min.css">
		<link rel="stylesheet" href="css/jquery-weui.min.css" />
		<link rel="stylesheet" href="css/index.css">
		<style type="text/css">

		</style>
		<!-- 图标 -->
		<script src="//at.alicdn.com/t/font_748398_ozk4d5k332j.js"></script>
		<!-- logo -->
		<script src="//at.alicdn.com/t/font_756404_3wfwbvrruoy.js"></script>
	</head>

	<body>
		<div class="header">
			<!-- 高度140px -->
			<div class="header-top-view">

			</div>
			<!-- 高度45px -->
			<div id="title" class="weui-flex header-box">
				<a id="btn-test" class="title-icon-box" href="javascript:alert('敬请期待')">
					<svg class="icon title-icon" aria-hidden="true">
						<use xlink:href="#icon-gift_icon"></use>
					</svg>
				</a>
				<div class="my-flex"></div>
				<!--占位置用的-->
				<div id="title-box" class="title-box off">
					<!-- ▲▼ -->
					<label id="btn-title" class="label-title-box">
						<label id="title-name">默认账单<font color="#B5B5B5">▼</font></label>
					</label>
				</div>
				<div class="my-flex"></div>
				<!--占位置用的-->
				<a class="title-icon-box" href="javascript:alert('敬请期待')">
					<svg class="icon title-icon" aria-hidden="true">
						<use xlink:href="#icon-riqi"></use>
					</svg>
				</a>
			</div>
		</div>
		<div id="main" class="main">
			<!-- 下拉的时候显示的玩意 这边我是一条线 -->
			<div class="weui-flex item-line pull-swiper-box" style="margin-top: -192px;">
				<div class="my-flex"></div>
				<div class="line" style="height: 200px;"></div>
				<div class="my-flex"></div>
			</div>
			<div id="pull-box" class="pull-swiper-box pull-box">
				<!-- 内容 -->

				<div class="weui-flex item-header">
					<div class="left">
						<p>总收入</p>
						<p id="sumIn">0.00</p>
					</div>
					<div class="icon-box">
						<p>净资产</p>
						<p id="sumMoney">0.00</p>
					</div>
					<div class="right">
						<p>总支出</p>
						<p id="sumOut">0.00</p>
					</div>
				</div>

				<div id="content" class="content">
					<!--检测位置用-->
					<div id="position-view"></div>

					<div class="weui-flex item-line">
						<div class="my-flex"></div>
						<div class="line"></div>
						<div class="my-flex"></div>
					</div>

					<div class="weui-flex item-box">
						<div class="my-flex left"></div>
						<div class="icon-box" style="background-color: #FFF;border-color: #636163;">
							<img src="img/index_logo.png" alt="" style="width: 24px;" />
						</div>
						<div class="my-flex right"></div>
					</div>

					<div class="item-bottom">
						<div id="userDate"></div>
						<div>你开启了记账的旅程</div>
					</div>

				</div>
			</div>
		</div>
		<div class="bar-bottom weui-flex">
			<!-- href="property.html" -->
				<a class="my-flex" href="javascript:alert('敬请期待')">
					<label class="bar-box-item">
						<div class="bar-box">
							<svg class="icon bar-icon" aria-hidden="true">
								<use xlink:href="#icon-coupons"></use>
							</svg>
						</div>
						<div class="bar-text">资产</div>
					</label>
				</a>
				<a class="my-flex" href="javascript:alert('敬请期待')">
					<label class="bar-box-item">
						<div class="bar-box">
							<svg class="icon bar-icon" aria-hidden="true">
								<use xlink:href="#icon-barrage"></use>
							</svg>
						</div>
						<div class="bar-text">报表</div>
					</label>
				</a>
				<a class="my-flex" href="add.html">
					<div class="bar-box-home">
						<svg class="icon bar-icon" aria-hidden="true">
							<use xlink:href="#icon-54"></use>
						</svg>
					</div>
				</a>
				<a class="my-flex" href="javascript:alert('敬请期待')">
					<label class="bar-box-item">
						<div class="bar-box">
							<svg class="icon bar-icon" aria-hidden="true">
								<use xlink:href="#icon-flag"></use>
							</svg>
						</div>
						<div class="bar-text">计划</div>
					</label>
				</a>
				<a class="my-flex" href="javascript:alert('敬请期待')">
					<label class="bar-box-item">
						<div class="bar-box">
							<svg class="icon bar-icon" aria-hidden="true">
								<use xlink:href="#icon-manage"></use>
							</svg>
						</div>
						<div class="bar-text">更多</div>
					</label>
				</a>
		</div>
		<script src="js/jquery-2.1.4.js"></script>
		<script src="js/jquery-weui.min.js"></script>
		<script src="js/jquery.swipe.js"></script>
		<script src="js/swiper.min.js"></script>
		<script src="js/city-picker.min.js"></script>
		<script src="js/common.js"></script>
		<script src="js/api.js"></script>
		<script>
			//常用变量
			var positionViewTop = 105;
			var titleBoxType = 0;

			var isTitleBoxChangeOver = true;
			var isTitleTopShow = false;
			var isQueryShow = false;
			var userId = null;

			var touchObj = {
				container: $('.pull-swiper-box') //需要变换的对象 
			};
			
			$(function() {
				//没有登录
				userId = API.getStorage("user");
				if(!userId){
					window.location.href = 'login.html?error=1';
					return;
				}
				$('#userDate').html(API.getStorage("date"));
				
				initDom(userId);
				
				//优良提示
				var a = getUrlParam("success");
			    if (a != null && a != '') {
			        if (a == '1') {
			            $.toptip('添加成功','success');
			        }
			    }
			
				//上方的默认账单切换按钮
				$('#btn-title').click(function() {
					if(isQueryShow) {alert('查找');return;}
					if(isTitleTopShow) {
						$('#title-name').html('默认账单<font color="#B5B5B5">▼</font>');
						$('#main').css('top', '45px');
						$('.header-top-view').css('top', '-140px');
						$('#title').css('top', '0px');
						positionViewTop = 105;
					} else {
						$('#title-name').html('默认账单<font color="#B5B5B5">▲</font>');
						$('#main').css('top', '185px');
						$('.header-top-view').css('top', '0px');
						$('#title').css('top', '140px');
						positionViewTop = 245;
					}
					isTitleTopShow = !isTitleTopShow;
				});
	
				//触摸事件绑定
				$('#pull-box').on("touchstart", function(e) {
					if(isTitleTopShow) return;
					var p = getTouchPosition(e);
					touchObj.start = p;
					touchObj.diffX = touchObj.diffY = 0;
				}).on("touchmove", function(e) {
					if(isTitleTopShow) return false;
					if(!touchObj.start) return false;
					if(touchObj.container.scrollTop() > 0) return;
					var p = getTouchPosition(e);
					touchObj.diffX = p.x - touchObj.start.x;
					touchObj.diffY = p.y - touchObj.start.y;
					if(Math.abs(touchObj.diffX) > Math.abs(touchObj.diffY)) return true; // 说明是左右方向的拖动
					if(touchObj.diffY < 0) {
						touchObj.diffY = 0 - (Math.pow(-touchObj.diffY, 0.75));
					} else {
						touchObj.diffY = Math.pow(touchObj.diffY, 0.75);
					}
					if(getPositionViewFlag()) {
						if(isQueryShow) {
							changeTitleBox(0);
							e.preventDefault();
							e.stopPropagation();
						}
						if(isTitleBoxChangeOver) {
							if(touchObj.diffY < 0) return;
							touchObj.container.css("transform", "translate3d(0, " + touchObj.diffY + "px, 0)");
							e.preventDefault();
							e.stopPropagation();
							if(touchObj.diffY < 50) {
								$('#title-name').html('下拉同步<font color="#B5B5B5">▼</font>');
							} else {
								$('#title-name').html('释放同步<font color="#B5B5B5">▼</font>');
							}
						}
					} else {
						//试试看 放到松手后 看是否流畅些
						//if(isTitleBoxChangeOver) changeTitleBox(touchObj.diffY < 0 ? 1 : 0);
					}
				}).on("touchend", function(e) {
					if(isTitleTopShow) return;
					//试试看 放到松手后 看是否流畅些
					if(!getPositionViewFlag() && isTitleBoxChangeOver) changeTitleBox(touchObj.diffY < 0 ? 1 : 0);
					if(getPositionViewFlag() && isTitleBoxChangeOver && !isQueryShow) {
						if(Math.abs(touchObj.diffY) <= 50) {
							//未拉倒50
							$('#title-name').html('默认账单<font color="#B5B5B5">▼</font>');
							touchObj.container.css("transform", "");
						} else {
							$('#title-name').html('正在同步<font color="#B5B5B5">▼</font>');
							setTimeout(function() {
								//假装获取数据中
								touchObj.container.css("transform", "");
								$('#title-name').html('默认账单<font color="#B5B5B5">▼</font>');
							}, 1500);
						}
					}
				});
				
				//每个条目的点击事件
				$('.item-icon-btn').click(function(){
					//改好了 记得测试
					if(!!$(this).attr('isShow') && $(this).attr('isShow') == '0') {
						$('.btn-action').addClass("action");
						$(this).attr('isShow','1');
					}else {
						$('.btn-action').addClass("action");
						$(this).parent().find('.item-btn-delete').removeClass("action");
						$(this).parent().find('.item-btn-edit').removeClass("action");
						$(this).attr('isShow','0');
					}
				});
			});

			//获取是否是最顶上
			function getPositionViewFlag() {
				return document.querySelector('#position-view').getClientRects()[0].top >= positionViewTop;
			}

			//改变titleBox值 0.6秒
			function changeTitleBox(type) { //type 0 title,1 query
				if(titleBoxType == type) return;
				if(!isTitleBoxChangeOver) return;
				isTitleBoxChangeOver = false;
				setTimeout(function(){
					isTitleBoxChangeOver = true;
				},600);
				if(type == 0) { //title
					isQueryShow = false;
					titleBoxType = 0;
					$('#btn-title').css('padding', '3px 8px');
					$('.title-icon-box').css({ opacity: 1 });
					$('#title-name').css({ opacity: 0.2 });
					setTimeout(function(){
						$('#title-name').html('默认账单<font color="#B5B5B5">▼</font>');
						$('#title-name').css({ opacity: 1 });
					},300);
				} else { //query
					isQueryShow = true;
					titleBoxType = 1;
					$('.title-icon-box').css({ opacity: 0 });
					$('#btn-title').css('padding', '3px 86px');
					$('#title-name').css({ opacity: 0.1 });
					setTimeout(function(){
						$('#title-name').html('<svg class="icon query-icon" aria-hidden="true"><use xlink:href="#icon-fujianbaobiao"></use></svg>请输入关键字');
						$('#title-name').css({ opacity: 1 });
					},300);
				}
			}
			
			
			function initDom(id){
				var result = API.getIndexData(id);
				$('#sumIn').html(result.mIn.toFixed(2));
				$('#sumOut').html(result.mOut.toFixed(2));
				$('#sumMoney').html(result.sum.toFixed(2));
				for(var i = 0; i <result.itemList.length; i++){
					$('#position-view').after(getItemDom(result.itemList[i]));
					$('#position-view').after(getItemLineDom());
				}
			}
			
			function getItemDom(obj){
				var html = '';
				if(obj.type == 0){
					html = '<div class="weui-flex item-box">\
						<div class="btn-action item-btn-delete action" onclick="deleteById(\''+ obj.id +'\')">\
							<svg class="icon" aria-hidden="true">\
								<use xlink:href="#icon-cha"></use>\
							</svg>\
						</div>\
						<div class="my-flex left">';
					if(obj.old == 0){
						html +=	'<label>'+ obj.money.toFixed(2) +'</label><label>'+ obj.title +'</label>';
					}
					html +=	'</div>\
						<div class="icon-box item-icon-btn" style="background-color: '+ obj.color +';border-color: '+ obj.color +';">\
							<svg class="icon" aria-hidden="true">\
								<use xlink:href="'+ obj.icon +'"></use>\
							</svg>\
						</div>\
						<div class="my-flex right">';
					if(obj.old == 1){
						html +=	'<label>'+ obj.title +'</label><label>'+ obj.money.toFixed(2) +'</label>'
					}
					html +=	'</div>\
						<div class="btn-action item-btn-edit action" onclick="updateById(\''+ obj.id +'\')">\
							<svg class="icon" aria-hidden="true">\
								<use xlink:href="#icon-qianbipencil82"></use>\
							</svg>\
						</div>\
					</div>';
				}
				
				if(obj.type == 1){
					//每日统计
					html = '<div class="weui-flex item-box"><div class="my-flex left">';
					if(obj.mIn != 0){
						html += '<label>'+ obj.mIn.toFixed(2) +'</label><label>收入</label>';
					}
					html += '</div><div class="text-box">'+ obj.day +'</div><div class="my-flex right">';
					if(obj.mOut != 0){
						html += '<label>支出</label><label>'+ obj.mOut.toFixed(2) +'</label>';
					}
					html += '</div></div>';
				}
				if(obj.type == 2){
					//月份
					html = '<div class="weui-flex item-box">\
						<div class="my-flex left">\
							<label class="month-text">'+ obj.month +'月</label>\
						</div>\
						<div class="month-box"></div>\
						<div class="my-flex right"></div>\
					</div>';
				}
				return html;
			}
			
			function getItemLineDom(){
				var html = `<div class="weui-flex item-line">
						<div class="my-flex"></div>
						<div class="line"></div>
						<div class="my-flex"></div>
					</div>`;
				return html;
			}
			
			function deleteById(id){
				alert('删除'+id);
			}
			
			function updateById(id){
				window.location.href = 'add.html?id='+id;
			}
		</script>
	</body>

</html>